import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useState } from 'react';
import Styles from './AlarmStatus.less';
import AutoScrollTable from './AutoScrollTable.tsx';

interface alarmInfoInterface {
  eventSummary: API.EventSummary;
  eventInfos: API.EventInfo[];
}

type IProps = {
  alarmInfo: alarmInfoInterface;
};

const AlarmStatus: React.FC<IProps> = (props) => {
  const { alarmInfo } = props;
  const { eventInfos } = alarmInfo;
  const [eventLevelOptions, setEventLevelOptions] = useState<any[]>([]);
  const getOptions = async () => {
    const res = await fetchDictInfo(DATABASE_TYPE_ENUM.EVENT_GRADE);
    setEventLevelOptions(res);
  };
  useEffect(() => {
    getOptions();
  }, []);

  const getScrollOptions = (options: any[]) => {
    if (options && options.length > 0) {
      return options?.map((item) => {
        return {
          ...item,
          eventLevelName: eventLevelOptions.find((FItem) => {
            return Number(FItem.value) === Number(item.level);
          })?.label,
        };
      });
    } else {
      return [];
    }
  };
  // const tableColumns: ProColumns[] = [
  //   {
  //     title: '序号',
  //     valueType: 'index',
  //     dataIndex: 'index',
  //     key: 'index',
  //     width: 50,
  //   },
  //   {
  //     title: '等级',
  //     dataIndex: 'eventLevel',
  //     key: 'eventLevel',
  //     render: (_, record) => {
  //       const text = eventLevelOptions.find((item) => {
  //         return Number(item.value) === Number(record.eventLevel);
  //       })?.label;
  //       return <span style={{ color: colorMap.get(record.eventLevel) }}>{text}</span>;
  //     },
  //     width: 60,
  //   },
  //   {
  //     title: '事件描述',
  //     dataIndex: 'eventName',
  //     key: 'eventName',
  //     render: (_, record) => {
  //       return (
  //         <Tooltip title={record.eventDesc}>
  //           <span>{record.eventDesc}</span>
  //         </Tooltip>
  //       );
  //     },
  //   },
  //   {
  //     title: '位置ID',
  //     dataIndex: 'bmsCode',
  //     key: 'bmsCode',
  //   },
  // ];
  // const Table = () => (
  //   <ProTable
  //     pagination={false}
  //     style={{ maxHeight: '220px' }}
  //     rowKey={'id'}
  //     columns={tableColumns}
  //     size="small"
  //     dataSource={eventInfos}
  //     search={false}
  //   ></ProTable>
  // );
  return (
    <div className={Styles.scrollComponent}>
      <AutoScrollTable data={getScrollOptions(eventInfos)} maxHeight={300} />
      {/*<ProTable*/}
      {/*  pagination={false}*/}
      {/*  style={{ maxHeight: '220px' }}*/}
      {/*  rowKey={'pageIndex'}*/}
      {/*  columns={tableColumns}*/}
      {/*  size="small"*/}
      {/*  dataSource={eventInfos}*/}
      {/*  search={false}*/}
      {/*  sticky={false}*/}
      {/*></ProTable>*/}
    </div>
  );
};

export default AlarmStatus;
